<!DOCTYPE html>
<html>
  <head>
    <title>第十一周</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="head col">
          <h2>第十一周 Jquery&&bootstrap</h2>
        </div>
      </div>
      <div class="row">
        <ul class="nav nav-tabs">
          <li role="presentation"><a href="#"  id="photoTab">相册</a></li>
          <li role="presentation" ><a href="#" id="aboutTab">关于</a></li>
        </ul>
      </div>
      <div class="row">
        <div class="col-md-4 col-xs-4">
          <div id="message"></div>
          <% if(user){ %>
             <h3><%=user.loginname%>，已登录|<a href='/users/logout'>退出</a></h3>
          <% }else{ %>
          <div><h3 id="loginStatus"></h3></div>
          <div class="login" id="login">
            <form id="loginForm">
              <p>用&nbsp;户&nbsp;名：<input type="text" name="loginname" id="logName"></p>
              <p>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id="logPassword"></p>
              <p>验&nbsp;证&nbsp;码：<input type="text" name="vimg">&nbsp;&nbsp;&nbsp;&nbsp;<img src="/users/vimg" alt=""></p>
              <div class="row">
                <div class="col-md-6">
                  <p class=" text-center"><input type="button" class="btn btn-default" value="注册" onclick="reg('in')"></p>
                </div>
                <div class="col-md-6">
                  <p><input type="button" class="btn btn-default" value="登录" id="loginbtn"></p>
                </div>
              </div>
            </form>
          </div>
          <div class="login" style="display: none;" id="reg">
            <form id="regForm">
              <p>用&nbsp;户&nbsp;名：<input type="text" name="loginname" id="regName"></p>
              <p>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id="regPassword"></p>
              <p>确认密码：<input type="password" name="confirm" id="regConfirm"></p>
              <p>验&nbsp;证&nbsp;码：<input type="text" name="vimg">&nbsp;&nbsp;&nbsp;&nbsp;<img src="/users/vimg" alt=""></p>
              <div class="row">
                <div class="col-md-6">
                  <p class=" text-center"><input type="button" class="btn btn-default" value="注册" id="regbtn"></p>
                </div>
                <div class="col-md-6">
                  <p><input type="button" class="btn btn-default" value="返回" onclick="reg('back')"></p>
                </div>
              </div>
            </form>
          </div>
          <% } %>
        </div>

        <div class="col-md-8 col-xs-8">
          <div class="row" id="upload" >
          <% if(user){ %>
            <form enctype="multipart/form-data" id="myfile">
                <div class="col-md-5 col-xs-5">
                  <input type="file" name="myfile" class="form-control">
                </div>
                <div class="col-md-5 col-xs-5">
                  <input type="button" id="uploadBtn" value="上传" class="btn btn-default">
                </div>
            </form>
            <% } %>
          </div>

          <div class="row">
            <div id="photoBook">
              <div id="photo">
                <ul id="1" class="active">
                    <!--<% list.forEach(function(fd){ %>-->
                  <!--<li><img src="/img/<%=fd.filename%>"></li>-->
                    <!--<% }) %>-->
                </ul>
              </div>
              <nav aria-label="Page navigation" id="page">
                <ul class="pagination">
                  <li><a href="#">1</a></li>
                </ul>
              </nav>
            </div>
            <div id="about" style="display: none;">
              <h1>关于第11周bootstrap&&jquery</h1>
            </div>
          </div>
        </div>
      </div>

    </div>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/javascripts/web.js"></script>
  </body>
</html>
